<script setup lang="ts">
import { Reply, RequestReply } from "../../index";
import SubReplyItem from "./SubReplyItem.vue";
// import { ChatDotSquare } from "@element-plus/icons-vue";
import { ref } from "vue";
import useUserStore from "../../store/userStore.ts";

const props = defineProps<{ reply: Reply }>();
const emit = defineEmits(["submitSubReply"]);
const userStore = useUserStore();

const isReply = ref(false);
const formData = ref<{
  content: string;
}>({
  content: "",
});

const toggleReply = () => {
  isReply.value = !isReply.value;
};

const submitSubReply = () => {
  emit("submitSubReply", {
    content: formData.value.content,
    publisherUserID: 5,
    belongDiscussionID: props.reply.belongDiscussionID,
    belongReplyID: props.reply.id,
    publisherName: userStore.userName,
    isRoot: 0,
  } as RequestReply);
  formData.value.content = "";
};

const publishTime = ref<Date>(new Date(props.reply.publishTime));
</script>

<template>
  <div class="my-4 border-b-2 pb-2">
    <!-- 
    <div
      class="mr-2 pr-2 hover:text-orange-500 float-right hover:cursor-pointer"
      @click="toggleReply"
    >
      <el-icon><ChatDotSquare /></el-icon>
    </div>
     -->
    <div>
      <div class="text-2xl mb-3">{{ reply.content }}</div>
      <div class="flex">
        <div class="flex-grow"></div>
        <div class="mx-3">
          <span class="text-green-700">{{ reply?.publisherName }}</span>
          发表于
          <span class="opacity-30"
            >{{ publishTime?.getFullYear() }}/{{ publishTime?.getMonth() }}/{{
              publishTime?.getDay()
            }}</span
          >
        </div>
        <div
          class="mr-2 pr-2 hover:text-orange-500 float-right hover:cursor-pointer"
          @click="toggleReply"
        >
          <el-icon><ChatDotSquare /></el-icon>
        </div>
      </div>
    </div>
    <transition name="sub-reply">
      <div v-show="isReply" class="box">
        <div class="bg-gray-200 rounded">
          <SubReplyItem
            v-for="item in reply.replies"
            :reply="item"
            :key="item.id"
          />
        </div>
        <div>
          <div class="max-w-full">
            <el-row class="my-2">
              <el-col :span="21">
                <el-form>
                  <el-form-item>
                    <el-input type="textarea" v-model="formData.content" />
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="3" class="text-center">
                <el-button type="primary" @click="submitSubReply"
                  >回复</el-button
                >
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped>
/* 1.过渡动画 */
@keyframes axisX {
  from {
    height: 0;
    /* transform: translateY(-100%); */
    overflow: hidden;
    opacity: 0;
  }
  to {
    height: 100%;
    opacity: 1;
    overflow: hidden;
    /* transform: translateY(0); */
  }
}

/* 2. 过渡类名 */
/* 开始 */
.sub-reply-enter-active {
  animation: axisX 1s;
}
/* 结束 */
.sub-reply-leave-active {
  animation: axisX 1s reverse;
}
.box {
  transition: 1s;
}
</style>
